/******************** 变量 ********************/
$lv-loading-icon-size-mini: $icon-size-base; // 16
$lv-loading-icon-size-small: $icon-size-md; // 24
$lv-loading-icon-size-medium: $icon-size-lg; // 32
$lv-loading-icon-size-default: $icon-size-xl; // 48

/******************** mixin ********************/
@mixin loading-icon-size($size) {
  width: $size;
  height: $size;
}

@mixin loading-size($size) {
  .lv-loading-content {
    .lv-loading-loader-container {
      @include loading-icon-size($size);
    }
  }
}

/******************** 组件 ********************/
lv-loading.lv-loading-no-children {
  display: inline-block;
}

.lv-loading {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

// 全局加载
.lv-loading-gloabl-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-loading-global;
}

// 局部加载
.lv-loading-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-loading;
}

.lv-loading-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: $loading-mask-bg-color;
}

.lv-loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: rotate(0deg) scale(1) translate(-50%, -50%);
}

.lv-loading-loader-container {
  display: inline-block;
  margin-bottom: $margin-sm;

  > .lv-icon-loading {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.lv-loading-text {
  color: $loading-default-text-color;
  font-size: $font-size-base;

  @include text-overflow;
}

// size
.lv-loading-icon-size {
  &-mini {
    @include loading-size($lv-loading-icon-size-mini);
  }

  &-small {
    @include loading-size($lv-loading-icon-size-small);
  }

  &-medium {
    @include loading-size($lv-loading-icon-size-medium);
  }

  &-default {
    @include loading-size($lv-loading-icon-size-default);
  }
}

.lv-loading-no-children {
  .lv-loading {
    display: block;
  }

  .lv-loading-container {
    position: static;
    line-height: 1;
  }

  .lv-loading-content {
    position: static;
    transform: none;
  }
}

.lv-loading {
  &.lv-loading-no-text {
    .lv-loading-loader-container {
      margin-bottom: 0;
    }
  }
}
